<template>
  <el-card style="width: 500px">
    <template #header>
      <div class="card-header">
        <span>管理员信息</span>
      </div>
    </template>
    <el-form
        style="max-width: 600px"
        :model="ruleForm"
        status-icon
        label-width="120px"
        :rules="rules"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username" style="width: 80%" autocomplete="off" />
      </el-form-item>

      <el-form-item label="密码" prop="pass">
        <el-input v-model="ruleForm.password" type="password" style="width: 80%" autocomplete="off" show-password/>
      </el-form-item>

      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="ruleForm.nickname" style="width: 80%" autocomplete="off" />
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input v-model="ruleForm.age" style="width: 80%" type="number" autocomplete="off" />
      </el-form-item>

      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio label="Male">男</el-radio>
          <el-radio label="Female">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="地址" prop="address">
        <el-input v-model="ruleForm.address" autocomplete="off" style="width: 80%" />
      </el-form-item>
      <el-form-item label="电话号码" prop="phone" >
        <el-input v-model="ruleForm.phone" autocomplete="off" style="width: 80%" />
      </el-form-item>
      <el-form-item label="头像">
        <el-image style="width: 100px; height: 100px"
                  :src="ruleForm.msg"
                  :preview-src-list="[ruleForm.msg]"
                  :hide-on-click-modal="true"
                  fit="cover"
        />
      </el-form-item>
      <el-form-item label="更换头像" >
        <el-upload ref="upload" action="http://localhost:8090/files/upload" :on-success="UploadSuccess">
          <el-button type="primary">上传图片</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <div style="text-align: center">
      <el-button type="primary" @click="update">
        保存
      </el-button>
    </div>
  </el-card>
</template>

<script setup>
import request from "../utils/request";
import {ElMessage} from "element-plus";
import {onMounted, ref,getCurrentInstance} from "vue";
import config from "@/config/config";
import {FileDelete} from "@/api/api";
const instance = getCurrentInstance();
const flags=ref([])
const url=config.baseurl+"/files/";

const ruleForm =ref({
  username: '',
  password: '',
  nickname: '',
  age: null,
  sex: '',
  address: '',
  msg:'',
  phone: '',
})
const rules = ref({
  phone: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    { validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入电话号码'));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
          if (!reg.test(value)) {
            callback(new Error('请输入正确的电话号码'));
          } else {
            callback();
          }
        }}, trigger: 'change' }
  ],
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
})

const UploadSuccess=(res)=>{
  if(!!ruleForm.value.msg) {
  flags.value.push(ruleForm.value.msg.replace(url, ""));
  }ruleForm.value.msg=res.data;
  console.log(res.data);
}
const getlist=async()=>{
  const res = await request.get('/manager/list',{params:{}});
  console.log(res.data.records[0]);
  ruleForm.value=JSON.parse(JSON.stringify(res.data.records[0]))
}
onMounted (async ()=>{await getlist()});
const update=async ()=>{
  if(instance.refs.upload){
    instance.refs.upload.clearFiles();
  }
  if(!ruleForm.value.phone||!ruleForm.value.username){
    ElMessage.error('请填写完整信息');
    return;
  }
  else{
    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
    if (!reg.test(ruleForm.value.phone)) {
      ElMessage.error('请输入正确的电话号码');
      return;
    }
  }
  const res=await request.put('/manager/edit',ruleForm.value);
  if (res.code === 0) {
    ElMessage.success('修改成功');
  } else {
    ElMessage.error(res.msg);
  }
  const FileDeletePromises =flags.value.map((item)=>{
    return FileDelete(item);
  })
  await Promise.all(FileDeletePromises);
  flags.value=[];
  await getlist();
}
</script>

<style scoped>

</style>
